import '@/styles/globals.css'
import { useState, useEffect } from 'react'
import { NextUIProvider } from '@nextui-org/react'
import FingerprintJS from '@fingerprintjs/fingerprintjs'
import { getCookie, setCookie } from 'cookies-next'
import type { AppProps } from 'next/app'
import Script from 'next/script'
import Header from '@/components/Header'
import Footer from '@/components/Footer'

import { GlobalContextProvider } from '@/contexts/globalContext'

import { storagePrefix, encrypt } from '@/shared/utils'

export default function App({ Component, pageProps }: AppProps) {
  const fingerprintInit = async () => {
    const fpPromise = FingerprintJS.load()
    try {
      const fp = await fpPromise
      const result = await fp.get()
      const { visitorId } = result
      // 通过浏览器指纹➕随机字符串生成 visitorId，方便开发测试，仅限开发环境
      // const randomString = Math.random().toString(36).substr(2)
      // const visitorId = id + randomString
      if (visitorId) {
        const encryptedVisitorId = await encrypt(visitorId)
        setCookie(storagePrefix('visitorId'), encryptedVisitorId, {
          path: '/',
        })
      }
    } catch (error) {}
  }

  useEffect(() => {
    fingerprintInit()
  }, [])

  return (
    <>
      <NextUIProvider>
        <GlobalContextProvider>
          <Header />
          <Component {...pageProps} />
          <Footer />
        </GlobalContextProvider>
      </NextUIProvider>
      {/* <>
        <Script
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              const link = document.createElement('link');
              link.rel = 'stylesheet';
              link.href = 'https://static.snaptube.in/iconfont/iconfont.css';
              document.head.appendChild(link);
            `,
          }}
        />
      </> */}
    </>
  )
}
